<route lang="json5">
{
  style: {
    navigationBarTitleText: '商家中心',
    navigationStyle: 'default',
  },
}
</route>
<template>
  <view class="min-h-screen bg-gray-100">
    <view class="mx-4 mt-4 rounded-lg bg-blue-600 p-4 text-white">
      <view class="flex items-center justify-between mb-3">
        <view class="flex items-center">
          <image :src="store.picture" class="w-12 h-12 rounded-full" mode="aspectFill"></image>
          <view class="ml-3">
            <view class="text-lg font-bold">{{ store?.name }}</view>
            <view class="text-xs">{{ store?.cname }}</view>
          </view>
        </view>
      </view>

      <view class="flex justify-between mt-4">
        <view
          class="flex flex-col items-center"
          @click="navigateTo(`/pages/store/order?storeId=${store.id}&status=0`)"
        >
          <text class="text-2xl font-bold">{{ data.obligation }}</text>
          <text class="text-sm mt-1">待支付</text>
        </view>
        <view
          class="flex flex-col items-center"
          @click="navigateTo(`/pages/store/order?storeId=${store.id}&status=1`)"
        >
          <text class="text-2xl font-bold">{{ data.pendingVerification }}</text>
          <text class="text-sm mt-1">待核销</text>
        </view>
        <view
          class="flex flex-col items-center"
          @click="navigateTo(`/pages/store/order?storeId=${store.id}&status=3`)"
        >
          <text class="text-2xl font-bold">{{ data.evaluate }}</text>
          <text class="text-sm mt-1">待评价</text>
        </view>
        <view
          class="flex flex-col items-center"
          @click="navigateTo(`/pages/store/order?storeId=${store.id}&status=5`)"
        >
          <text class="text-2xl font-bold">{{ data.afterSales }}</text>
          <text class="text-sm mt-1">售后退款</text>
        </view>
      </view>
    </view>

    <view class="mx-4 mt-4 bg-white rounded-lg p-4">
      <view class="flex items-center justify-between mb-4">
        <text class="text-lg font-bold">核心数据</text>
        <view class="flex">
          <view
            class="px-3 py-1 rounded-l-lg border border-gray-200 border-solid"
            :class="{ 'bg-gray-200': index == 0 }"
            @click="changeSevenDay"
          >
            <text>7天</text>
          </view>
          <view
            class="px-3 py-1 rounded-r-lg border border-gray-200 border-solid"
            :class="{ 'bg-gray-200': index == 1 }"
            @click="changeTotal"
          >
            <text>总计</text>
          </view>
        </view>
      </view>

      <view class="grid grid-cols-3">
        <view class="flex flex-col items-center">
          <text class="text-gray-500 mb-2">成交金额</text>
          <text class="text-2xl font-bold">{{ data.storeTurnover }}</text>
        </view>

        <view class="flex flex-col items-center">
          <text class="text-gray-500 mb-2">订单数</text>
          <text class="text-2xl font-bold">{{ data.storeOrderCount }}</text>
        </view>
      </view>
    </view>

    <!-- Basic Tools -->
    <view class="mx-4 mt-4 bg-white rounded-lg p-4">
      <view class="text-lg font-bold mb-4">基础工具</view>

      <view class="grid grid-cols-3 gap-4">
        <view
          class="flex flex-col items-center"
          @click="navigateTo('/pages/store/order?storeId=' + store.id)"
        >
          <view class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
            <i class="iconfont icon-dianpu text-center w-12 h-12 leading-12 text-7"></i>
          </view>
          <text class="text-sm">订单管理</text>
        </view>

        <view class="flex flex-col items-center" @click="openScan">
          <view class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
            <i class="iconfont icon-saoma text-center w-12 h-12 leading-12 text-7"></i>
          </view>
          <text class="text-sm">扫码核销</text>
        </view>

        <view
          class="flex flex-col items-center"
          @click="navigateTo('/pages/store/productList?storeId=' + store.id)"
        >
          <view class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
            <i class="iconfont icon-dianpu text-center w-12 h-12 leading-12 text-7"></i>
          </view>
          <text class="text-sm">商品管理</text>
        </view>
      </view>
    </view>

    <!-- 扫码核销 -->
    <!-- 产品信息弹窗 -->
    <wd-popup v-model="scanShow" closeable>
      <!-- 订单信息 -->
      <view
        class="bg-white rounded-lg w-84 min-h-64 p-4 rounded shadow-sm overflow-hidden"
        v-if="order"
      >
        <view class="p-3 border-b border-gray-100 flex justify-between items-center">
          <view class="flex items-center">
            <text class="text-xs text-gray-500">订单编号：{{ order.orderId }}</text>
            <text
              v-if="order.isUrgent"
              class="ml-2 px-1.5 py-0.5 bg-red-100 text-red-500 text-xs rounded"
            >
              加急
            </text>
          </view>
          <text
            class="text-sm font-medium"
            :class="{
              'text-black-500': order.status === 0,
              'text-blue-500': order.status === 1,
              'text-green-500': order.status === 3,
              'text-purple-500': order.status === 5,
            }"
          >
            {{ parseStatus(order.status) }}
          </text>
        </view>

        <view class="p-3 flex">
          <!-- Product Image -->
          <view class="relative">
            <image
              :src="order.productImage"
              :alt="order.productName"
              class="w-20 h-20 object-cover rounded-md"
            />
            <view
              class="absolute -bottom-1 -right-1 bg-gray-800/70 text-white text-xs px-1.5 py-0.5 rounded-full"
            >
              x{{ order.totalNum }}
            </view>
          </view>

          <!-- Order Info -->
          <view class="ml-3 flex-1">
            <view class="font-medium text-gray-800 line-clamp-2">{{ order.productName }}</view>

            <view class="mt-1 flex justify-between items-baseline">
              <view>
                <text class="text-sm text-gray-500">¥{{ order.totalPrice }}</text>
                <text class="text-xs text-gray-400 ml-1">x{{ order.totalNum }}</text>
              </view>
              <view class="text-sm font-medium">
                <text class="text-gray-500">合计：</text>
                <text class="text-black-500">¥{{ order.totalPrice }}</text>
              </view>
            </view>

            <view class="mt-2 flex flex-wrap text-xs text-gray-500">
              <text class="mr-3" v-if="order.channel == 0">支付方式：微信支付</text>
              <text class="mr-3" v-if="order.channel == 1">支付方式：支付宝支付</text>
              <text>下单时间：{{ order.createTime }}</text>
            </view>

            <view v-if="order.verificationTime" class="mt-1 text-xs text-gray-500">
              核销时间：{{ order.verificationTime }}
            </view>
          </view>
        </view>

        <!-- 核销按钮 -->
        <!-- <wd-button type="primary"  @click="submit" block>核销</wd-button> -->
        <view
          class="w-full py-3 bg-[#ff6a33] text-center text-white font-medium border border-orange-500 rounded-lg"
          @click="submit"
        >
          核销
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup>
import { http } from '@/utils/http'
import dayjs from 'dayjs'

const store = ref({})
const storeId = ref('')

const index = ref(0)

const queryParams = ref({
  'params[begin]': '',
  'params[end]': '',
})

const data = ref({
  afterSales: 0, //售后退款
  evaluate: 0, //待评价
  obligation: 0, //待付款
  pendingVerification: 0, //待核销
  //
  storeOrderCount: 0, //订单数
  storeTurnover: 0, //成交金额
})

const order = ref(null)
const scanShow = ref(false)

const parseStatus = (status) => {
  if (status == 0) {
    return '待付款'
  } else if (status == 1) {
    return '待核销'
  } else if (status == 3) {
    return '待评价'
  } else if (status == 4) {
    return '已完成'
  } else if (status == 5) {
    return '售后/退款'
  }
}

const openScan = () => {
  // 获取订单信息
  uni.scanCode({
    onlyFromCamera: true,
    success: async (res) => {
      // 调用查询订单信息接口
      let resp = await http.get('/api/home/queryByOrderId', { orderId: res.result })
      if (resp.code == 200) {
        order.value = resp.data
        scanShow.value = true
      }
    },
  })
}

const submit = async () => {
  uni.showModal({
    title: '提示',
    content: '是否确认核销',
    showCancel: true,
    success: async ({ confirm, cancel }) => {
      if (confirm) {
        let resp = await http.get('/api/home/writeOrder', {
          verificationCode: order.value.verificationCode,
          storeId: store.value.id,
        })

        if (resp.code == 200) {
          scanShow.value = false

          uni.showToast({
            title: resp.msg,
            icon: 'none',
            mask: false,
          })
        }
      }
    },
  })
}

const navigateTo = async (url) => {
  uni.navigateTo({ url })
}

const getData = async () => {
  let res = await http.get('/api/store/details', { id: storeId.value })

  if (res.code == 200) {
    console.log('res', res)
    store.value = res.data.store
  }

  //   订单数据
  let resp = await http.get('/api/store/storeOrderCount')
  if (resp.code == 200) {
    console.log('resp', resp)
    data.value.afterSales = resp.data.afterSales || 0
    data.value.evaluate = resp.data.evaluate || 0
    data.value.obligation = resp.data.obligation || 0
    data.value.pendingVerification = resp.data.pendingVerification || 0
  }

  //   经营数据
  let resp1 = await http.get('/api/store/storeTurnover', { ...queryParams.value })
  if (resp1.code == 200) {
    console.log('resp1', resp1)

    data.value.storeTurnover = resp1.data.storeTurnover || 0
    data.value.storeOrderCount = resp1.data.storeOrderCount || 0
  }
}

//
const changeSevenDay = async () => {
  index.value = 0

  let endTime = dayjs().endOf('day')

  queryParams.value['params[end]'] = endTime.format('YYYY-MM-DD HH:mm:ss')
  queryParams.value['params[begin]'] = endTime
    .subtract(7, 'day')
    .startOf('day')
    .format('YYYY-MM-DD HH:mm:ss')

  getData()
}

const changeTotal = async () => {
  index.value = 1
  queryParams.value['params[begin]'] = null
  queryParams.value['params[end]'] = null

  getData()
}

onLoad((option) => {
  // 获取当前日期开始和结束时间并减去7天

  let endTime = dayjs().endOf('day')

  queryParams.value['params[end]'] = endTime.format('YYYY-MM-DD HH:mm:ss')
  queryParams.value['params[begin]'] = endTime
    .subtract(7, 'day')
    .startOf('day')
    .format('YYYY-MM-DD HH:mm:ss')

  let id = option.id

  storeId.value = id

  getData()
})
</script>

<style lang="scss" scoped></style>
